<template>
	<view class="content" style="padding-bottom: 120rpx;">
		<!-- tab栏 -->
		<u-sticky v-if="listtype!=1">
			<view class="ffffff">
				<!-- <view class="toptext flexcenter main_size">點擊優惠券勾選后點擊底部立即使用即可</view> -->
				<u-tabs :list="tabList" :scrollable="false" @click="tabchange" lineWidth="60rpx"
					lineColor="rgba(255, 184, 0, 1)" :activeStyle="{
				  color: '#000000',
				  fontWeight: 800,
				  transform: 'scale(1.05)'}" :inactiveStyle="{
				  color: '#666666',
				    transform: 'scale(1)'
				}"></u-tabs>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="padding_bottom margin_top" style="border-bottom: 1rpx dashed #333;" v-for="item in list.data" :key="item.shop_id">
				<view class="flexleft" @click="jumpdetail('/pages_index/shopInfo?id=',item.shop_id)">
					<image class="shopImg margin_right2" :src="item.logo_text" mode=""></image>
					<view class="color_ling text_x">{{item.shop_name}}</view>
				</view>
				<view class="" v-for="value in item.yhq_list" :key="value.id" @click="checkyhq(value)">
					<view class="margin_top2 shadow dingwei" :class="tabsid==0?'couponBox':'couponBox2'">
						<view class="flexleft">
							<view class="radius"
								style="background-color: #ed4d2d;height: 160rpx;width: 150rpx;padding: 10rpx;">
								<view class="text flexcolumn" style="height: 100%;" v-if="value.data_type==1">
									<view>
										<text class="price">$</text>
										<text class="price" style="font-size: 46rpx;">{{value.dk_money}}</text>
									</view>
									<view class="xiaobai text_b textcenter">滿{{value.di_money}}</view>
									<view class="xiaobai margin_top1" style="font-size: 20rpx;">
										{{value.use_type==1?'單張':'多張'}}使用
									</view>
								</view>
								<view class="text flexcolumn" style="height: 100%;" v-if="value.data_type==2">
									<image :src="value.image_text" mode="" 
										style="width: 120rpx;height: 120rpx;min-width: 120rpx;border-radius: 10rpx;"></image>
									<view class="xiaobai text_b textcenter margin_top2">滿{{value.di_money}}</view>
								</view>
							</view>
							<view class="flex1 ffffff flexcolumnbet"
								style="width: 100%;height: 160rpx;border-radius: 0 10rpx 10rpx 0;align-items: flex-start;padding: 10rpx;">
								<view class="flexbetween" style="width: 100%;">
									<view class="color_ling text_weight">{{value.name}}</view>
									<view class="use margin_top" v-if="tabsid==0">使用</view>
									<view class="checkfocus" v-if="value.ischeck && tabsid==0">
										<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
									</view>
									<view class="use1" v-if="tabsid==1">
										已使用
									</view>
									<view class="use1" v-if="tabsid==2">
										已過期
									</view>
								</view>
								<view class="flexbetween" style="width: 100%;" @click.stop="value.isShow=!value.isShow">
									<view class="hei_text  bold" style="font-size: 24rpx;">
										{{http.returnDate(value.starttime*1000)}}~{{http.returnDate(value.endtime*1000)}}</text>
									</view>
									<view class="flexright">
										<view class="color_ling main_size">可用分店</view>
										<u-icon name="arrow-down" v-show="!value.isShow" color="#333"
											size="16"></u-icon>
										<u-icon name="arrow-up" v-show="value.isShow" color="#333" size="16"></u-icon>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view v-show="value.isShow">
						<view class="flexbetween  ffffff margin_top1 radius shadow" style="padding: 20rpx;"
							v-for="(ite,ind) in value.fenshopinfo" :key="ite.id" @click.stop="enterShopInfo(ite.id)">
							<view class="flexleft" style="width: 90%;">
								<image :src="ite.logoimage_text" mode=""
									style="min-width: 100rpx;height: 100rpx;width: 100rpx;" class="radius margin_right2"></image>
								<view class="">
									<view class="color_ling text_x yihang" style="width: 440rpx;">{{ite.name}}
									</view>
									<view class="xiaohei margin_top yihang">{{ite.address}}
									</view>
								</view>
							</view>
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding" style="padding-bottom: 0;">
			<view class="submitbtn" v-if="tabsid==0" @click="allsubmithx">立即使用</view>
		</view>
		<u-modal :show="scanshow" title="核銷券碼" confirmText="關閉" @confirm="scanshow=false">
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexcenter" v-if="scanshow">
					<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="qrcodeurl_text" :options="{ margin: 10}"
						size="150">
					</uqrcode>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsid: 0,
				tabList: [{
					name: "未使用",
					id: 0,
				}, {
					name: "已使用",
					id: 1,
				}, {
					name: "已過期",
					id: 2,
				}],
				list: {
					data: []
				},
				listtype: 0, //1確認訂單選擇優惠券
				shop_id: "",
				allprice: 0,
				scanid: "",
				qrcodeurl: "",
				qrcodeurl_text: "",
				scanshow: false,
				userInfo: {}
			}
		},
		onLoad(options) {
			if (options.type) {
				this.listtype = options.type
				this.shop_id = options.shop_id
				this.allprice = options.allprice
			}
			this.getlianjie()
			this.getlist()
			this.getInfo()
		},
		methods: {
			async getInfo() {
				let res = await this.http.request('/api/member/userInfo', 'GET', {})
				this.userInfo = res.data
			},
			allsubmithx() {
				if (!this.userInfo.nickname || !this.userInfo.username || !this.userInfo.email) {
					this.http.toast("請完善個人信息后操作")
					return false
				}
				let ids = []
				let rall_allids = []
				let checkdkprice = 0
				this.list.data.forEach(item => {
					item.yhq_list.forEach(value => {
						if (value.ischeck) {
							ids.push(value.id)
							rall_allids.push(value.rall_id)
							checkdkprice = Number(value.dk_money) + checkdkprice
						}
					})
				})
				let rall_ids = [...new Set(rall_allids)]; //數組去重
				if (this.listtype == 0) {
					this.qrcodeurl_text = this.qrcodeurl + "?ids=" + ids.join() + "&rall_ids=" + rall_ids
					console.log("二維碼鏈接", this.qrcodeurl_text);
					this.scanshow = true
				} else {
					let data = {
						yh_money: checkdkprice,
						rall_ids: ids.join()
					}
					uni.$emit("selectyhq", data)
					uni.navigateBack(1)
				}

			},
			enterShopInfo(id) {
				uni.navigateTo({
					url: '/pages_index/shopInfo?id=' + id
				})
			},
			getlianjie() {
				this.http.request("/api/member/getlinke", 'POST', {}).then(res => {
					this.qrcodeurl = res.data
				})
			},
			checkyhq(value) { //店鋪詳情
				if (this.tabsid != 0) { //已使用或者已過期點擊
					return false
				}
				if (this.tabsid == 0 && this.listtype == 0) { //我的優惠券未使用點擊
					if (value.ischeck) { //取消勾選不走下面的邏輯判斷判斷每次可使用數量
						value.ischeck = value.ischeck ? false : true
						return false
					} else {
						value.ischeck = value.ischeck ? false : true
						let rall_allids = []
						this.list.data.forEach(item => {
							item.yhq_list.forEach(current => {
								if (current.ischeck) {
									rall_allids.push(current.rall_id)
								}
							})
						})
						let rall_ids = [...new Set(rall_allids)]; //數組去重
						rall_ids.forEach(val => {
							this.list.data.forEach(item => {
								item.yhq_list.forEach(current => {
									if (val == current.rall_id) {
										if (rall_allids.filter(search => search == val).length -
											1 ==
											current.use_num) {
											this.http.toast(current.name + "只能選" + current
												.use_num + '個')
											value.ischeck = false
											return false
										}
									}
								})
							})
						})
					}
				}
				if (this.listtype == 1) { //訂單下單選擇優惠券進入
					if (value.ischeck) { //取消勾選不走下面的邏輯判斷判斷每次可使用數量
						value.ischeck = value.ischeck ? false : true
						return false
					} else {
						let checkprice = 0
						value.ischeck = value.ischeck ? false : true
						let rall_allids = []
						this.list.data.forEach(item => {
							item.yhq_list.forEach(current => {
								if (current.ischeck) {
									rall_allids.push(current.rall_id)
									checkprice = Number(current.di_money) + checkprice
								}
							})
						})
						if (Number(checkprice) > Number(this.allprice)) {
							value.ischeck = false
							this.http.modal('提示', "您的剩餘金額未能達到該優惠券使用條件", false, (resp) => {})
							return false
						}
						let rall_ids = [...new Set(rall_allids)]; //數組去重
						rall_ids.forEach(val => {
							this.list.data.forEach(item => {
								item.yhq_list.forEach(current => {
									if (val == current.rall_id) {
										if (rall_allids.filter(search => search == val).length -
											1 ==
											current.use_num) {
											this.http.toast(current.name + "必選" + current
												.use_num + '個')
											value.ischeck = false
											return false
										}
									}
								})
							})
						})
					}
				}
			},
			tabchange(e) {
				this.tabsid = e.id
				this.getlist()
				this.list.data = []
			},
			getlist() { //獲取個人信息
				let _this = this
				let url = "/api/member/myship"
				let data = {
					type: this.tabsid
				}
				if (this.listtype == 1) {
					url = "/api/ordergoods/getship"
					this.$set(data, "shop_id", this.shop_id)
				}
				this.http.request(url, 'POST', data).then(res => {
					if (res.code == 1) {
						let shoparr = []
						res.data.forEach(item => {
							this.$set(item, "isShow", false)
							shoparr.push({
								shop_id: item.shop_id,
								shop_name: item.shop.name,
								logo_text: this.imgUrl + item.shop.logoimage,
								yhq_list: []
							})
						})
						let map = new Map();
						for (let item of shoparr) {
							if (!map.has(item.shop_id)) {
								map.set(item.shop_id, item);
							};
						};
						let setshoparr = [...map.values()]
						setshoparr.forEach(ite => {
							res.data.forEach(item => {
								if (item.shop_id == ite.shop_id) {
									this.$set(item, 'ischeck', false)
									ite.yhq_list.push(item)
								}
							})
						})
						this.list.data = setshoparr
						console.log(setshoparr);
					} else if (res.code == 0) {
						this.http.toast(res.msg)
					} else {
						this.http.toast('系統處理中，請稍後再試');
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shadow {
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
	}

	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	::v-deep.u-tabs {
		padding: 0 20rpx;
	}

	.shopImg {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
		background: #D9D9D9;
		border-radius: 10rpx;
	}

	.couponBox {
		background-color: rgba(255, 232, 207, 1);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		box-sizing: border-box;
	}

	.couponBox2 {
		background-color: rgba(155, 155, 155, .1);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		box-sizing: border-box;
	}

	.price {
		font-size: 25rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #fff;
	}

	.line {
		width: 0;
		height: 52rpx;
		border-right: 1rpx solid #999999;
	}

	.toptext {
		padding: 10rpx;
		text-align: center;
		background: #ed4d2d;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #ed4d2d;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.use {
		width: 90rpx;
		height: 49rpx;
		text-align: center;
		line-height: 49rpx;
		background: #ed4d2d;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #ed4d2d;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
	}


	.use1 {
		width: 132rpx;
		height: 49rpx;
		text-align: center;
		line-height: 49rpx;
		background: rgba(153, 153, 153, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #999;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999;
	}
</style>